<template>
    <div class="container">
        <Form :model="searchObj" inline>
            <FormItem>
                <Input v-model="searchObj.name" class="search-input" clearable placeholder="请输入姓名"/>
            </FormItem>
            <FormItem>
                <Input v-model="searchObj.card_no" class="search-input" clearable placeholder="请输入身份证号"/>
            </FormItem>
            <FormItem>
                <Select v-model="searchObj.type" placeholder="请选择类型" style="width: 200px" clearable>
                    <Option value="1">绿码</Option>
                    <Option value="3">黄码</Option>
                    <Option value="4">红码</Option>
                </Select>
            </FormItem>
            <FormItem>
                <Select v-model="searchObj.p2" placeholder="请选择状态" style="width: 200px" clearable>
                    <Option value="1">未处理</Option>
                    <Option value="2">已处理</Option>
                    <Option value="3">未注册</Option>
                </Select>
            </FormItem>
            <FormItem>
                <Button class="search-btn" type="success" @click="search">
                <Icon type="ios-search"/>
                    搜索
                </Button>
            </FormItem>
            <FormItem>
                <Button class="search-btn" type="primary" @click="addBtn">
                    <Icon type="ios-add"/>
                    添加
                </Button>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="importExcel">
                    <Icon type="ios-cloud-upload-outline"/>
                    数据导入
                </Button>
            </FormItem>
        </Form>
        <Row type="flex" justify="center">
            <Col span="24">
                <Table border :loading="tableLoading" :columns="tableColumns" :data="tableData" @on-selection-change="tableSelectChange">
                    <template slot="p2" slot-scope="{ row }">
                        <span v-if="row.p2 == 1">未处理</span>
                        <span v-if="row.p2 == 2" style="color: green">已处理</span>
                        <span v-if="row.p2 == 3" style="color: red">未注册</span>
                    </template>
                    <template slot="type" slot-scope="{ row }">
                        <span v-if="row.type == 1">
                            <Tag type="dot" color="success">绿码</Tag>
                        </span>
                        <span v-if="row.type == 3" style="color: green">
                            <Tag type="dot" color="warning">黄码</Tag>
                        </span>
                        <span v-if="row.type == 4" style="color: red">
                            <Tag type="dot" color="error">红码</Tag>
                        </span>
                    </template>
                    <template slot="action" slot-scope="{ row }">
                        <Button type="primary" size="small" class="action-btn" @click="editBtn(row)">编辑</Button>
                        <!--<Button type="info" size="small" class="action-btn" @click="infoBtn(row)">详情</Button>-->
                        <Button type="error" size="small" class="action-btn" @click="delBtn(row.id)">删除</Button>
                    </template>
                </Table>
            </Col>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Page show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord" @on-change="getPageNo"/>
        </Row>
        <option-modal ref="optionModal" :modal-title="modalTitle" :modal-show="modalShow" :modal-type="modalType" :dataObj="modalData" @cancelOption="cancelOption" @saveOption="saveOption"></option-modal>
    </div>
</template>

<script>
import {
  getWhiteList,
  saveWhiteList
} from '@/api/customer-service'
import OptionModal from './components/option-modal'
export default {
  components: { OptionModal },
  data () {
    return {
      modalShow: false,
      modalTitle: '',
      modalType: '',
      modalData: {},
      tableColumns: [
        {
          type: 'index',
          width: 70,
          title: '序号',
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          width: 200,
          align: 'center'
        },
        {
          title: '证件号',
          key: 'card_no',
          width: 300,
          align: 'center'
        },
        {
          title: '类型',
          slot: 'type',
          width: 120,
          align: 'center'
        },
        {
          title: '理由',
          key: 'reason',
          width: 300,
          align: 'center',
          tooltip: true
        },
        {
          title: '状态',
          slot: 'p2',
          width: 100,
          align: 'center'
        },
        {
          title: '操作',
          minWidth: 250,
          slot: 'action',
          align: 'center',
          fixed: 'right'
        }
      ],
      tableData: [],
      selectData: [],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      searchObj: {}
    }
  },
  props: {},
  mounted () {
    const param = {
      pageNo: this.pageObj.pageNo,
      pageSize: this.pageObj.pageSize
    }
    this.init(param)
  },
  methods: {
    cancelOption () {
      this.modalShow = false
    },
    saveOption () {
      this.modalShow = false
      this.init()
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    tableSelectChange (val) {
      this.selectData = val
    },
    initPage () {
      this.pageObj.pageNo = 1
      this.pageObj.pageSize = 10
    },
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        name: this.$common.xeUtils.trim(this.searchObj.name),
        card_no: this.$common.xeUtils.trim(this.searchObj.card_no),
        type: this.$common.xeUtils.trim(this.searchObj.type),
        p2: this.$common.xeUtils.trim(this.searchObj.p2)
      }
      let param = data || obj
      this.tableLoading = true
      getWhiteList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.tableData = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    search () {
      this.initPage()
      this.init()
    },
    addBtn () {
      this.modalTitle = '添加'
      this.modalType = 'add'
      this.modalData = {}
      this.modalShow = true
    },
    editBtn (val) {
      this.modalTitle = '编辑'
      this.modalType = 'edit'
      this.modalData = this.$common.xeUtils.clone(val)
      this.modalShow = true
    },
    infoBtn (val) {
      this.modalTitle = '详情'
      this.modalType = 'info'
      this.modalData = this.$common.xeUtils.clone(val)
      this.modalShow = true
    },
    delBtn (val) {
      this.$Modal.confirm({
        title: '确认删除此人么？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          this.deleteOne(val)
        }
      })
    },
    deleteOne (val) {
      saveWhiteList({ id: val, del_flag: '1' }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.init()
          this.success('删除成功')
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    },
    importExcel () {
      this.$router.push({
        name: 'excelImport',
        query: { type: 'whiteList' }
      })
    }
  }

}
</script>

<style scoped>
    .container {
        padding-bottom: 50px;
    }
    .action-btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
    .search-input {
        width: 180px;
    }
    .search-btn {
        width: 100px;
    }
</style>
